<!DOCTYPE html>
<html>
    <head>
        <title>Subresource integrity blocked style resources</title>
        <script src="/resources/testharness.js"></script>
        <script src="/resources/testharnessreport.js"></script>

        <script>
            setup({single_test: true});

            var steps = 0;
            var loaded = 0;
            var failed = 0;

            function markLoaded() {
                ++loaded;
                runNextStep();
            }

            function markFailed() {
                ++failed;
                runNextStep();
            }

            function insertStylesheetAsLink(cssHref, hash)
            {
                var link = document.createElement("link");
                link.rel = "stylesheet";
                link.href = cssHref;
                link.integrity = hash;
                link.addEventListener('load', markLoaded);
                link.addEventListener('error', markFailed);
                document.head.appendChild(link);
            }

            function runNextStep()
            {
                switch (++steps) {
                case 1:
                    insertStylesheetAsLink("style-1-of-3.css", "sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=");
                    break;
                case 2:
                    insertStylesheetAsLink("style-2-of-3.css", "sha384-XVVXBGoYw6AJOh9J_Z8pBDMVVPfkBpngexkA7JqZu8d5GENND6TEIup_tA1v5GPr");
                    break;
                case 3:
                    insertStylesheetAsLink("style-3-of-3.css", "sha512-tbUPioKbVBplr0b1ucnWB57SJWt4x9dOE0Vy2mzCXvH3FepqDZ-07yMK81ytlg0MPaIrPAjcHqba5csorDWtKg==");
                    break;
                case 4:
                    finishTest();
                    break;
                }
            }

            function finishTest()
            {
                var color = window.getComputedStyle(document.querySelector('#p1')).color;
                assert_not_equals(color, "rgb(0, 128, 0)", "The p#1 element's text should not be green.");
                color = window.getComputedStyle(document.querySelector('#p2')).color;
                assert_not_equals(color, "rgb(0, 128, 0)", "The p#2 element's text should not be green.");
                color = window.getComputedStyle(document.querySelector('#p3')).color;
                assert_not_equals(color, "rgb(0, 128, 0)", "The p#3 element's text should not be green.");
                assert_equals(failed, 3, "All stylesheet loads should have failed.");
                assert_equals(loaded, 0, "All stylesheet loads should have failed.");
                done();
            }
        </script>
    </head>
    <body onload="runNextStep()">
        <p id="p1">Test 1</p>
        <p id="p2">Test 2</p>
        <p id="p3">Test 3</p>
    </body>
</html>
